<template>
  <div class="app-content">
    <h2 class="font-medium mb-5 flex items-end">
      <span class="mr-2.5">正式版本</span>
    </h2>
    <el-alert
      type="warning"
      show-icon
      description="因系统升级，抖音iOS端25.8.0，抖音极速版iOS端27.2.0，抖音火山版iOS端26.9.0及以上版本可能无法搜索与访问小程序，安卓端和其他APP未受影响，具体恢复时间请关注平台通知。"
    />
    <div v-if="row" class="flex justify-between items-center mt-5">
      <div>
        <p class="text-gray-500 mb-2.5">版本号</p>
        <p>{{ row.version }}</p>
      </div>
      <div>
        <p><span>发布时间：</span>{{ timestampToTime(row.ctime) }}</p>
        <p class="mt-2.5"><span>项目备注：</span>{{ row.summary }}</p>
      </div>
      <div>
        <el-popover placement="left" title="预览" width="200" trigger="click" class="mr-2.5" @show="onGetDouyinQrcode('audit')">
          <template #default>
            <div v-loading="qrcodeLoading" class="text-center">
              <img :src="qrcode['audit']" alt="" width="180" />
            </div>
          </template>
          <template #reference>
            <el-button>预览</el-button>
          </template>
        </el-popover>
        <!--0:审核中，1:通过，2:不通过，3：撤回审核-->
        <el-button v-if="row.status === 1" type="success">上架小程序</el-button>
        <el-popover v-if="row.status === 2" placement="left" width="600" trigger="click" class="mx-2.5">
          <template #default>
            <el-descriptions
              v-if="row.reason_detail.length > 0"
              border
              title="详细原因"
              :column="1"
              :label-style="{ width: '120px' }"
              :content-style="{ width: '450px' }"
            >
              <el-descriptions-item v-for="(items, key) in row.reason_detail" :key="key" :label="key">
                <p v-for="(item, k) in items" :key="k" class="mb-1.5">{{ k + 1 }}.{{ item }}</p>
                <el-link type="primary" :underline="false">
                  <a :href="row.attachInfo[key]" target="_blank">查看详情</a>
                </el-link>
              </el-descriptions-item>
            </el-descriptions>
            <el-empty v-else />
          </template>
          <template #reference>
            <el-button type="danger">查看原因</el-button>
          </template>
        </el-popover>
        <el-button v-if="row.status === 0" type="primary" :loading="loading" @click="onRevokeAuditDouyinVersion()"> 撤回审核 </el-button>
      </div>
    </div>
    <div v-else class="flex items-center justify-center h-25 text-gray-500">暂无正式版本</div>
  </div>
</template>

<script setup>
import { ref, computed, inject, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { timestampToTime } from './utils'
import { getDouyinQrcode, revokeAuditDouyinVersion } from '@/api/platform/app/douyin_open'

defineOptions({
  name: 'DkDouyinCurrentContainer'
})

const props = defineProps({
  row: {
    type: Object,
    default: () => null
  }
})

const emit = defineEmits(['update'])

const loading = ref(false)
const qrcodeLoading = ref(false)
const qrcode = ref({})
const defaultApp = inject('defaultApp')

const platformAppId = computed(() => {
  return defaultApp.value.id
})

// 撤回审核
const onRevokeAuditDouyinVersion = () => {
  loading.value = true
  revokeAuditDouyinVersion(platformAppId.value).then((res) => {
    ElMessage.success(res.msg)
    loading.value = false
    emit('update')
  })
}

const onGetDouyinQrcode = (version) => {
  qrcodeLoading.value = true
  getDouyinQrcode(platformAppId.value, version)
    .then((res) => {
      console.log(res)
      qrcode.value[version] = res.data.qr_code_url
      qrcodeLoading.value = false
    })
    .catch(() => {
      qrcodeLoading.value = false
    })
}
</script>
